<template>
<div class="tourShow">
    <div class="title_tour">
        <h2>巡回演出</h2>
        <h3>全部&gt;</h3>
    </div>
    <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
        <van-swipe-item v-for="(item,index) in tourShowList" :key='index'>
            <div class="img_tour"><img :src="item.mobile_col_img" alt=""></div>
            <div class="tour_con">
                <span class="tour_tim">{{endTime(index)}}</span>
                <p>{{item.name}}</p>
                <span class="tour_money"><span>￥{{item.min_price}}</span> 元</span>
                <ul>
                    <li>{{item.citys.length}}{{CityList(index)}}</li>
                    <li ></li>
                </ul>
            </div>
        </van-swipe-item>
    </van-swipe>
</div>
</template>

<script>
import Vue from 'vue';
import { Swipe, SwipeItem } from 'vant';

Vue.use(Swipe);
Vue.use(SwipeItem);
import {mapState} from 'vuex'
export default {
    data () {
        return {
        }
    },
    computed:{
        ...mapState('main',['tourShowList']),
        endTime(){
            return function(index){
                let endTim=this.tourShowList[index].end_time*1000;
                let startTim=this.tourShowList[index].start_time*1000;
                let endTime=new Date(endTim)
                let endstr='';
                endstr=endTime.getFullYear()+'.'+endTime.getMonth()+"."+endTime.getDate()
                let startTime=new Date(startTim)
                let startstr='';
                startstr=startTime.getFullYear()+'.'+startTime.getMonth()+"."+startTime.getDate()
                return startstr+'-'+endstr
            }
        },
        CityList(){
            return function(index){
                 
                let arrList = this.tourShowList[index].citys
                let str=''
                arrList.forEach((item)=>{
                    str+=item.name+'|'
                })
                return str
            }
        }
    }
}
</script>

<style lang='scss' scoped>
.tourShow{
    padding: .2rem;
    .my-swipe .van-swipe-item {
        color: #555;
        font-size: .2rem;
        height: 2.2rem;
        display: flex;
        padding-top: .1rem ;
        width: 100%;
        text-align: left;
        // background-color: #39a9ed;
        padding-left: .1rem;
        .img_tour{
            width: 1.54rem;
            height: 1.95rem;
            img{
                width: 100%;
                height: 100%;
            }
        }
        .tour_con{
            margin-left: .1rem;
            display: flex;
            // padding-right: .2rem;
            flex-direction: column;
            p{
                font-size: .34rem;
            }
            .tour_money{
                span{
                    color: orangered;
                    font-size: .34rem;
                }
            }
        }
    }
    .title_tour{
        display: flex;
        justify-content: space-between;
    }
}
 
</style>
